<template>
	<view style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;">
		<view v-if="storeList.length ==0">
			暂无门店
		</view>
		<view v-else-if="storeList[0] && storeList[0].isShow != 1">
			暂无门店营业！
		</view>
		<view v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;">
			<view style="z-index: 20000;">
				<u-notify ref="uNotify"></u-notify>
			</view>
			<view style="flex-basis: 50px;box-shadow: 0 2px 4px #e1e5e9;">
				<view style="width: 100%;height: 100%;display: flex;align-items: center;">
					<view
						style="flex-basis: 50px;height: 100%;display: flex;align-items: center;justify-content: center;"
						@click="show = true">
						<image src="@/static/shop.png" style="width: 24px;height: 24px;"></image>
					</view>
					<view
						style="flex: 1;height: 100%;display: flex;align-items: center;justify-content: space-between;padding-right: 10px;box-sizing: border-box;"
						@click="show = true">
						<view>{{storeActiveitem.name}}</view>
						<view>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view style="flex-basis: 120px;display: flex;align-items: center;">
						<u-radio-group v-model="delivery" placement="row">
							<u-radio activeColor="green" :name="1" label="自提"></u-radio>
							<u-radio activeColor="green" :name="0" label="配送" :disabled="storeActiveitem.delivery != 1">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-popup :show="show" @close="close" mode="center" :round="10">
					<view style="width: 710rpx;padding: 10px;box-sizing: border-box;">
						<scroll-view scroll-y="true" style="height: 750rpx;width: 100%;" :show-scrollbar="true">
							<view
								style="text-align: center;line-height: 40px;border-bottom: 1px solid #BBBCBE;margin-bottom: 15px;">
								我们的门店很多，千万别选错了哦~
							</view>
							<view :class="item.storeId == storeActiveitem.storeId?'storeActive':''"
								v-for="(item,index) in storeList" :key="item.name" @click="selectStore(item)"
								style="display: flex;box-shadow: 0 2px 4px #e1e5e9;margin-bottom: 15px;padding: 10px;border-radius: 10px;position: relative;">
								<view
									style="flex: 2;display: flex;flex-direction: column;justify-content: space-between;">
									<view style="flex-basis: 20px;display: flex;align-items: center;">
										<image src="@/static/shop.png"
											style="width: 20px;height: 20px;margin-right: 5px;"></image>
										<text style="font-weight: 600;">{{item.name}}</text>
									</view>
									<view style="flex-basis: 25px;display: flex;align-items: flex-end;">
										<view style="font-size: 12px;">营业时间{{item.validtimeStart}}-{{item.validtimeEnd}}
										</view>
										<view style="display: flex;flex: 1;">
											<view v-if="item.isShow">
												<u-tag text="营业中" plain size="mini"></u-tag>
											</view>
											<view v-else>
												<u-tag text="休息中" plain size="mini" type="warning"></u-tag>
											</view>
											<view style="margin-left: 10px;" v-show="item.delivery">
												<u-tag text="可配送" plainFill plain size="mini"></u-tag>
											</view>
										</view>
									</view>
								</view>
								<view v-if="item.storeId == storeActiveitem.storeId"
									style="position: absolute;bottom: 0;right: 0;width: 20px;height: 20px;background-color: pink;border-radius: 100% 0 0 0;">
									<view style="position: absolute;right: -2px;bottom: -2px;">
										<u-icon name="checkbox-mark" color="#ffffff" size="20"></u-icon>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</u-popup>
			</view>
			<view style="flex: 1;overflow: hidden;background-color: #f7f7f7;">
				<scroll-view style="height: 100%;" :refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh" :scroll-y="true" :show-scrollbar="true"
					:refresher-enabled="true">
					<view v-if="commodityList.length !=0"
						style="display: flex;flex-wrap: wrap;padding: 10rpx;box-sizing: border-box;">
						<view v-for="item in commodityList" :key="item.commodity" @click="commodityCardClick(item)"
							style="width: 365rpx;padding: 10rpx;box-sizing: border-box;">
							<view style="width: 100%;height: 100%;background-color: #fff;border-radius: 20rpx;">
								<image style="width: 100%;height: 345rpx;border-radius: 20rpx 20rpx 0 0;" :src="item.image.length>0?ptUrl + item.image:'#'"></image>
								<view style="padding: 10px;">
									<view>{{item.commodityName}}</view>
									<view style="margin-top: 10px;display: flex;align-items: center;justify-content: space-between;">
										<view style="color: red;flex-basis: auto;">￥{{item.price}}</view>
										<view style="display: flex;font-size: 3.5vw;">
											<view style="flex-basis: auto;">仅剩:</view>
											<view style="flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.stock}}</view>
											<view style="flex-basis: auto;">张</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						该门店暂无出售商品！
					</view>
				</scroll-view>
				<u-popup :show="commodityPopupShow" @close="commodityPopupClose" mode="bottom" :round="10">
					<view>
						<view v-if="commodityPopupData && commodityPopupData.isMultiSpecification == 0" style="position: relative;">
							<scroll-view style="max-height:calc( 100vh - 180px );width: 100%;" show-scrollbar="true"
								scroll-y="true">
								<view style="display: flex;flex-direction: column;padding:15px;box-sizing: border-box;">
									<view style="width: 100%;display: flex;justify-content: center;">
										<view style="flex-basis: 250rpx;">
											<image
												:src="commodityPopupData.image.length>0 ? ptUrl+commodityPopupData.image:'#'"
												style="width:250rpx;height: 250rpx;"></image>
										</view>
										<view style="flex: 1;display: flex;flex-direction: column;padding-left: 20rpx;">
											<view style="font-weight: 600;">{{commodityPopupData.commodityName}}</view>
											<view style="color: #9e9e9e;font-size: 14px;padding: 10rpx 0;" class="text-box">
												{{commodityPopupData.introduction}}
											</view>
											<view style="display: flex;">
												<view>￥{{commodityPopupData.price}}</view>
												<view>库存：{{commodityPopupData.stock}}</view>
											</view>
										</view>
									</view>
									<view>
										<text style="font-size: 20px;color: rgba(0,0,0,0.8);">规格</text>
										<view style="width: 120rpx;">
											<u-tag text="默认" type="error"></u-tag>
										</view>
									</view>
								</view>
							</scroll-view>
							<view
								style="height: auto;box-shadow: 0 1px 4px 2px rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);display: flex;flex-direction: column;padding: 0 15px;box-sizing: border-box;">
								<view
									style="height: 40px;width: 100%;padding: 0 12px;box-sizing: border-box;display: flex;align-items: center;">
									<view style="flex: 1;">
										￥{{commodityPopupData.price*num}}
									</view>
									<view class="numberBox" >
										<u-number-box slot="right-icon" v-model="num" step="1" :min="0"
											:max="commodityPopupData.stock" key="danguige"
											color="#000000" :buttonSize="24" bgColor="red" iconStyle="color: #fff">
										</u-number-box>
									</view>
								</view>
								<view v-if="num != 0" style="height: 50px;width: 100%;display: flex;align-items: center;">
									<u-button @click="addShopToCard(commodityPopupData,num)" type="primary" shape="circle"
										text="加入购物车"></u-button>
									<u-button @click="toPurchase(commodityPopupData,num)" type="error" shape="circle"
										text="立即购买"></u-button>
								</view>
							</view>
						</view>
						<view
							v-if="commodityPopupData.commoditySpecificationsDTO && commodityPopupData.commoditySpecificationsDTO.isMultiSpecification"
							style="position: relative;">
							<scroll-view style="max-height:calc( 100vh - 180px );width: 100%;" show-scrollbar="true"
								scroll-y="true">
								<view style="display: flex;flex-direction: column;padding:15px;box-sizing: border-box;">
									<view style="width: 100%;display: flex;justify-content: center;">
										<view style="flex-basis: 250rpx;">
											<image
												:src="commodityPopupData.commoditySpecificationsDTO.image ? ptUrl+commodityPopupData.commoditySpecificationsDTO.image:'#'"
												style="width:250rpx;height: 250rpx;"></image>
										</view>
										<view style="flex: 1;display: flex;flex-direction: column;padding-left: 20rpx;">
											<view style="font-weight: 600;">
												{{commodityPopupData.commoditySpecificationsDTO.commodityName}}
											</view>
											<view style="color: #9e9e9e;font-size: 14px;padding: 10rpx 0;" class="text-box">
												{{commodityPopupData.commodityDetailsValueDTOList[commodityPopupData.activeCommodityIndex].introduction}}
											</view>
											<view style="display: flex;">
												<view>
													￥{{commodityPopupData.commodityDetailsValueDTOList[commodityPopupData.activeCommodityIndex].price}}
												</view>
												<view>
													库存：{{commodityPopupData.commodityDetailsValueDTOList[commodityPopupData.activeCommodityIndex].stock}}
												</view>
											</view>
										</view>
									</view>
									<view>
										<view v-for="item in commodityPopupData.typeGroupDTOList" :key="item.typeGroupId">
											<text
												style="font-size: 20px;color: rgba(0,0,0,0.8);">{{item.typeGroupName}}</text>
											<u-radio-group v-model="item.radioValue" placement="row">
												<u-radio :customStyle="{marginTop: '8px',marginBottom: '8px',marginRight: '32rpx'}"
													v-for="citem in item.groupValueList" :disabled="citem.disabled"
													:key="citem.groupValueId" :label="citem.groupValueName"
													:name="citem.groupValueId" @change="radioChange()">
												</u-radio>
											</u-radio-group>
										</view>
									</view>
								</view>
							</scroll-view>
							<view
								style="height: auto;box-shadow: 0 1px 4px 2px rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);display: flex;flex-direction: column;padding: 0 15px;box-sizing: border-box;">
								<view
									style="height: 40px;width: 100%;padding: 0 12px;box-sizing: border-box;display: flex;align-items: center;">
									<view style="flex: 1;">
										￥{{commodityPopupData.commodityDetailsValueDTOList[commodityPopupData.activeCommodityIndex].price*num}}
									</view>
									<view class="numberBox">
										<u-number-box slot="right-icon" v-model="num" step="1" :min="0" key="duoguige"
											:max="commodityPopupData.commodityDetailsValueDTOList[commodityPopupData.activeCommodityIndex].stock"
											color="#000000" :buttonSize="24" bgColor="red" iconStyle="color: #fff">
										</u-number-box>
									</view>
								</view>
								<view v-if="num != 0" style="height: 50px;width: 100%;display: flex;align-items: center;">
									<u-button @click="addShopToCard(commodityPopupData,num)" type="primary" shape="circle"
										text="加入购物车"></u-button>
									<u-button @click="toPurchase(commodityPopupData,num)" type="error" shape="circle"
										text="立即购买"></u-button>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<view v-if="cardAllNumAndPrice.allNum" style="flex-basis: 50px;background-color: #F8F8F8;">
				<view @click="cardPopupShow = true"
					style="width: 100%;height: 100%;display: flex;padding: 0 10px;box-sizing: border-box;align-items: center;background-color: #ffffff;border-radius: 15px 15px 0 0;">
					<view 
						style="flex-basis: 40px;height: 100%;position: relative;display: flex;align-items: center;">
						<image src="@/static/shopping-cart-one.png" style="width: 30px;height: 30px;"></image>
						<u-badge type="error" max="99" :value="cardAllNumAndPrice.allNum" :absolute="true"
							:offset="[-5,0]"></u-badge>
					</view>
					<view style="flex: 1;height: 100%;display: flex;align-items: center;">
						￥{{cardAllNumAndPrice.allPrice}}
					</view>
					<view style="flex-basis: 100px;" @click.stop="toSettlementPage">
						<u-button type="primary" shape="circle" text="去结算" ></u-button>
					</view>
				</view>
				<u-popup :show="cardPopupShow" @close="cardPopupClose" mode="bottom" :round="10">
					<view>
						<view
							style="height: 40px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;">
							<view style="height: 100%;position: relative;display: flex;align-items: center;">
								<image src="@/static/shopping-cart-one.png" style="width: 30px;height: 30px;"></image>
								<u-badge type="error" :value="cardAllNumAndPrice.allNum" :absolute="true"
									:offset="[-10,-10]"></u-badge>
							</view>
							<view>
								<u-icon name="arrow-up"></u-icon>
							</view>
						</view>
						<view
							style="height: 27px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;background-color: #f9f9f9;">
							<view style="height: 100%;display: flex;align-items: center;">
								<text v-if="delivery == 1"
									style="color:#1c9492;font-size: 12px;border: 1.5px solid #1c9492;padding: 0.5px 2px;">自提订单</text>
								<text v-else
									style="color:#F9AE3D;font-size: 12px;border: 1.5px solid #F9AE3D;padding: 0.5px 2px;">外送订单</text>
							</view>
							<view style="height: 100%;display: flex;align-items: center;">
								<u-icon name="trash" color="#909196"></u-icon>
								<text style="font-size: 12px;color: #909196;" @click="clearCard">清空列表</text>
							</view>
						</view>
						<scroll-view scroll-y="true" style="max-height: calc( 100vh - 180px );min-height: 0;">
							<view v-for="(item,index) in cardList" :key="item.commodityDetailsId"
								style="display: flex;height: 80px;align-items: center;">
								<view
									style="flex-basis: 80px;display: flex;align-items: center;justify-content: center;">
									<image :src="item.image ? ptUrl+item.image:'#'"
										style="width: 66px;height: 66px;"></image>
								</view>
								<view
									style="height: 100%;flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding: 8px 0;box-sizing: border-box;">
									<view>{{item.commodityName}}</view>
									<view v-if="item.isMultiSpecification">
										<text
											style="color:#1c9492;font-size: 12px;border: 1.5px solid #1c9492;padding: 0.5px 2px;"
											v-for="gitem in item.groupValueList"
											:key="gitem.groupValueId">{{gitem.groupValueName}}</text>
									</view>
									<view v-else>
										<text
											style="color:#1c9492;font-size: 12px;border: 1.5px solid #1c9492;padding: 0.5px 2px;">默认</text>
									</view>
									<view style="display: flex;align-items: flex-end;">
										<view style="flex: 1;font-size: 3.8vw;">￥{{item.price*item.num}}</view>
										<view class="numberBox" style="margin-right: 10px;">
											<u-number-box slot="right-icon" :integer="true" v-model="item.num" step="1"
												:min="0" :max="item.stock" color="#000000" :buttonSize="24"
												:key="item.commodityDetailsId" bgColor="red" @change="valChange"
												:name="item.commodityDetailsId" iconStyle="color: #fff">
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view
							style="padding: 0 10px;box-sizing: border-box;height: 50px;box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);display: flex;align-items: center;">
							<view style="flex: 1;">
								￥{{cardAllNumAndPrice.allPrice}}
							</view>
							<view style="flex-basis: 100px;">
								<u-button type="primary" shape="circle" text="去结算" @click="toSettlementPage"></u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ptUrl,
	} from '@/utils/env.js'
	export default {
		computed: {
			cardAllNumAndPrice() {
				let allNum = 0;
				let allPrice = 0;
				for (let i = 0; i < this.cardList.length; i++) {
					allNum += this.cardList[i].num
					allPrice += this.cardList[i].price * this.cardList[i].num
				}
				return {
					"allNum": allNum,
					"allPrice": allPrice
				};
			}
		},
		data() {
			return {
				ptUrl: ptUrl,
				delivery: 1, //自提、外送ridio，1：自提
				commodityList: [], //商品列表
				show: false, //门店列表u-popup是否显示
				cardPopupShow: false, //购物车u-popup是否显示
				cardList: [], //购物车数据
				storeActiveitem: {}, //当前选中的门店
				storeList: [], //门店列表
				commodityPopupShow: false, //商品详情信息u-popup是否显示
				commodityPopupData: null, //商品详情信息数据
				num: 1, //commodityPopupShow里面的商品数量
				refresherTriggered: false,
			}
		},
		onLoad() {
			this.show = true
		},
		onShow() {
			this.getStore()
		},
		methods: {
			radioChange(item) {
				// console.log('radioChange', item);
				this.$nextTick(() => {
					let data = []
					let typeGroupDTOList = this.commodityPopupData.typeGroupDTOList
					for (let s of typeGroupDTOList) {
						data.push(s.radioValue)
					}
					data = data.sort().toString();
					let commodityDetailsValueDTOList = this.commodityPopupData.commodityDetailsValueDTOList
					for (let i in commodityDetailsValueDTOList) {
						if (commodityDetailsValueDTOList[i].groupValueIdList.sort().toString() == data) {
							this.commodityPopupData.activeCommodityIndex = i
							if(this.commodityPopupData.commodityDetailsValueDTOList[i].stock == 0){
								this.num = 0
							}else{
								this.num = 1
							}
							break;
						}
					}
					// console.log(data)
				})
			},
			//下拉刷新
			refresherrefresh() {
				this.refresherTriggered = true;
				console.log("下拉刷新")
				setTimeout(() => {
					this.refresherTriggered = false;
				}, 3000)
			},
			//获取门店列表
			getStore() {
				this.$http("/store/getStore", "get", null).then(res => {
					this.storeList = res.data.data
					if (JSON.stringify(this.storeActiveitem) == "{}") {
						this.storeActiveitem = res.data.data[0]
					} else {
						for (let item of res.data.data) {
							if (item.storeId == this.storeActiveitem.storeId) {
								if (item.isShow == 1) {
									this.storeActiveitem = item
								} else {
									this.storeActiveitem = res.data.data[0]
								}
								break;
							}
						}
					}
					this.getCommodity(this.storeActiveitem.storeId)
				})
			},
			getCommodity(storeId) {
				this.$http("/commodity/getAllCommodityByStoreId", "get", {
					storeId: storeId
				}).then(res => {
					this.commodityList = res.data.data
				})
			},
			//选择门店
			selectStore(item) {
				if (item.isShow != 1) {
					this.$refs.uNotify.show({
						message: '该本店已经打烊了~',
						type: 'error',
						color: '#ffffff',
						bgColor: '',
						fontSize: 14,
						duration: 3000,
						safeAreaInsetTop: false
					})
					return;
				}
				if (item.storeId == this.storeActiveitem.storeId) {
					this.show = false
					return;
				}
				this.storeActiveitem = item
				this.getCommodity(this.storeActiveitem.storeId)
				this.clearCard();
				this.delivery = 1
				this.show = false
			},
			//门店popup弹出层关闭事件
			close() {
				this.show = false
				console.log('close');
			},
			//购物车popup弹出层关闭事件
			cardPopupClose() {
				this.cardPopupShow = false
			},
			//商品详情信息u-popup弹出层关闭事件
			commodityPopupClose() {
				this.commodityPopupShow = false
				this.commodityPopupData = null
			},
			//商品点击事件：打开popup
			commodityCardClick(data) {
				this.getCommodityByCommodity(data.commodity, data.isMultiSpecification);
				this.commodityPopupShow = true
			},
			//根据商品id和是否为多规格获取数据
			getCommodityByCommodity(commodity, isMultiSpecification) {
				this.$http("/commodity/getCommodityByCommodity", "get", {
					commodity,
					isMultiSpecification
				}).then(res => {
					let data = res.data.data;
					this.num = 1
					if(data.commodity){
						if(data.stock == 0){
							this.num = 0
						}
					}else{
						if(data.commodityDetailsValueDTOList[data.activeCommodityIndex].stock == 0){
							this.num = 0
						}
					}
					this.commodityPopupData = data
				})
			},
			// 添加到购物车事件
			addShopToCard(idata, inum) {
				// console.log(data,num)
				let data = JSON.parse(JSON.stringify(idata));
				let num = parseInt(inum);
				if (data.commoditySpecificationsDTO && data.commoditySpecificationsDTO.isMultiSpecification) {
					data = {
						...data.commoditySpecificationsDTO,
						...data.commodityDetailsValueDTOList[data.activeCommodityIndex]
					}
				}
				let i = this.cardList.findIndex(value => value.commodityDetailsId == data.commodityDetailsId);
				// console.log(i)
				if (i == -1) {
					data.num = num;
					this.cardList.push(data);
				} else {
					let nowNum = this.cardList[i].num + num
					if (nowNum < this.cardList[i].stock) {
						this.cardList[i].num = nowNum
					} else {
						this.cardList[i].num = this.cardList[i].stock
					}
				}
				this.commodityPopupClose()
			},
			//清空购物车
			clearCard() {
				this.cardList = []
			},
			//购物车步进器事件
			valChange(e) {
				console.log('当前值为: ' + e.value, e.name)
				if (e.value == 0) {
					this.cardList = this.cardList.filter(value => {
						if (value.commodityDetailsId != e.name) {
							return true
						}
					})
				}
			},
			toSettlementPage() {
				// console.log("toSettlementPage")
				let data = {
					cardList: this.cardList,
					delivery: this.delivery,
					storeActiveitem: this.storeActiveitem,
					cardAllNumAndPrice:  {
						allNum: this.cardAllNumAndPrice.allNum,
						allPrice: this.delivery == 1 ? this.cardAllNumAndPrice.allPrice :this.cardAllNumAndPrice.allPrice+ this.storeActiveitem.freight
					},
				}
				uni.navigateTo({
					url: '/pages/classification/components/settlement?data=' + JSON.stringify(data)
				})
			},
			toPurchase(idata, inum) {
				let data = JSON.parse(JSON.stringify(idata));
				let num = parseInt(inum);
				if (data.commoditySpecificationsDTO && data.commoditySpecificationsDTO.isMultiSpecification) {
					data = {
						...data.commoditySpecificationsDTO,
						...data.commodityDetailsValueDTOList[data.activeCommodityIndex]
					}
				}
				data.num = num
				let sdata = {
					cardList: [data],
					delivery: this.delivery,
					storeActiveitem: this.storeActiveitem,
					cardAllNumAndPrice: {
						allNum: num,
						allPrice: this.delivery == 1 ? num * data.price : num * data.price + this.storeActiveitem
							.freight
					},
				}
				uni.navigateTo({
					url: '/pages/classification/components/settlement?data=' + JSON.stringify(sdata),
					complete: () => {
					   this.commodityPopupClose()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.storeActive {
		border: 2px solid pink;
	}

	.numberBox>>>input {
		background-color: transparent !important;
	}

	.numberBox>>>.u-number-box__minus,
	.numberBox>>>.u-number-box__plus {
		border-radius: 50%;
		width: 24px;
	}

	.text-box {
		word-break: break-all;
		white-space: pre-wrap;
	}
</style>
